<template>
	<view class="container" v-if="loaded">
		<view class="search" @click="onSearchClick()">
			<view class="box">
				<image src="../../../static/fanli/icon_search.png" mode="" class="icon"></image>
				<view class="p">
					搜索你需要的商品
				</view>
			</view>
		</view>
		
		<view class="menu">
			<view class="ul">
				<view class="li" v-for="(item, index) in tabs" :key="index" :class="currentTab == index ? 'current' : ''" @click="onTabClick(index)">
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		
		<view class="panel" v-for="(tab, key) in tabs" :key="key" v-show="currentTab == key">
			<view class="list">
				<view class="dl" v-for="(item, index) in tab.data" :key="index">
					<view class="dt">
						{{item.name}}
					</view>
					
					<view class="dd">
						<view class="item" v-for="(c, cidx) in item.child" :key="cidx" @click="onSearchClick(c.name, c.cat_id)">
							<image :src="c.pic" mode="" class="pic"></image>
							<view class="p">
								{{c.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		JSMRequest
	} from '@/module/api'
	
	export default {
		data() {
			return {
				loaded: false,
				tabs: [],
				currentTab: 0
			};
		},
		
		watch: {
			currentTab (current) {
				let tab = this.tabs[current]
				if(!tab.loaded) this.getPageData()
			}
		},
		
		methods: {
			onTabClick (index) {
				this.currentTab = index
			},
			
			getPageData () {
				let _t = this
				let tab = _t.tabs[_t.currentTab]
				
				JSMRequest({
					tag: "jsm-category",
					method: "POST",
					params: {
						pid: tab.id
					}
				}).then(({data}) => {
					uni.hideLoading()
					tab.data = data
					tab.loaded = true
					_t.loaded = true
				}).catch(e => {
					tab.loaded = true
					_t.loaded = true
				})
			},
			
			// 搜索
			onSearchClick (val = "", cid = "") {
				uni.navigateTo({
					url: `/pages/home/search/search?keyword=${val}&catid=${cid}`
				})
			}
		},
		
		onLoad () {
			let _t = this
			
			JSMRequest({
				tag: "jsm-category",
				method: "POST"
			}).then(({data}) => {
				uni.hideLoading()
				_t.tabs = data.map((v, k) => {
					return {
						id: v.cat_id,
						name: v.name,
						data: [],
						loaded: false
					}
				})
				_t.getPageData()
			}).catch(e => {
				
			})
		}
	}
</script>

<style lang="less" scoped>
	.search{
		position: sticky;
		height: 92px;
		width: 100%;
		border-bottom: 1px solid #e5e5e5;
		background: #FFF;
		top: 0;
		left: 0;
		z-index: 5;
		box-sizing: border-box;
		padding: 0 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		
		.box{
			height: 72px;
			width: 100%;
			border-radius: 72px;
			background: #F1F1F1;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			
			.icon{
				width: 30px;
				height: 30px;
				margin-left: 30px;
			}
			
			.p{
				margin-left: 30px;
				font-size: 24px;
				color: #666;
			}
		}
	}
	
	.menu{
		position: fixed;
		top: 92px;
		z-index: 5;
		bottom: 0;
		left: 0;
		width: 200px;
		background: #F1F1F1;
		overflow-y: auto;
		
		.ul{
			
			.li{
				height: 72px;
				display: flex;
				align-items: center;
				padding-left: 30px;
				margin-bottom: 20px;
				
				text{
					font-size: 28px;
					color: #333333;
				}
				
				&.current{
					background: #FFFFFF;
					
					text{
						color: #FF2D5E
					}
				}
			}
		}
	}
	
	.panel{
		padding-left: 230px;
		padding-right: 30px;
		padding-top: 30px;
		
		.dl{
			margin-bottom: 30px;
			
			.dt{
				font-size: 30px;
				color: #222222;
			}
			
			.dd{
				display: flex;
				align-items: flex-start;
				justify-content: flex-start;
				flex-wrap: wrap;
				padding-bottom: 30px;
				
				.item{
					width: 150px;
					margin-left: 20px;
					padding-top: 30px;
					
					.pic{
						width: 150px;
						height: 150px;
					}
					
					.p{
						text-align: center;
						font-size: 24px;
						color: #333333;
					}
					
					&:nth-child(3n+1){
						margin-left: 0;
					}
				}
			}
		}
	}
</style>
